
<template>
  <div>
    <Card>
      <div style="min-width:1120px;max-width:1160px;">
        <div style="width:505px;height:275px;" class="marginR20 pullLeft">
          <img :src="xImg" class="width100 height100 cover" />
        </div>
        <div class="overflowH">
          <!-- <div class="c333 f_30 marginB10">{{sTitle}}{{smTitle}}</div> -->
          <div class="c333 f_30 marginB10">{{sTitle}}</div>
          <div class="c666 f_16 marginB10">
            {{xTitle}}
          </div>

          <template v-if="type==200 || type==209">
            <div class="f_20 marginB5 paddingT10 c999">{{type==200?'普通注册':'担保注册'}}：</div>
            <div class=" paddingLi f_16 marginB20" style="background-color:#f3f3f3;">
              <Icon type="md-warning relative cRed marginR10" style="top:-2px;" size="24" />
              每一类别为{{allK}}元，包含10个小分类，超出10个，每个{{item_fee}}元
            </div>
            <Button type="primary"  @click="goDo" >立即办理</Button>
          </template>
          <template v-else>
            <div
              class="f_16 paddingLi inlineBlock lineH34 marginB20"
              style="background-color:#f3f4f3;"
            >
              费用总计：￥
              <span
                class="cRed f_24 f_bold"
              >{{($app.judgeData(list) && active!=null )?parseFloat(list[active].price):0}}</span>
              起（官费：￥
              <span
                class="cRed f_24 f_bold"
              >{{($app.judgeData(list) && active!=null )?parseFloat(list[active].official_fee):0}}</span>
              ；服务费：￥
              <span
                class="cRed f_24 f_bold"
              >{{($app.judgeData(list) && active!=null )?parseFloat(list[active].service_fee):0}}</span>
              ）
            </div>
            <div class="c666 f_16 marginB10">
              服务项目：
              <span
                class="xuTp textLink"
                v-for="(val,i) in list"
                :key="'info'+i"
                :class="active==i?' active':''"
                @click="active=i"
              >{{val.name}}</span>
            </div>
            <Divider class="margin0 marginB20" />
            <Button type="primary" class="marginR20" :disabled="active === null" @click="goDo">立即办理</Button>
            <span class="cRed" v-show="typeI==3">
              * 版权业务下单后，待系统审核通过需快递纸质原件
            </span>
          </template>

          
          
          
        </div>
        <div class="clearfix"></div>
        <div class="marginT20" style="border:1px solid #e8eaec;">
          <div class="paddingLi f_16 c666">服务介绍</div>
          <Divider class="margin0" />
          <img :src="iImg" class="width100" />
        </div>
      </div>
    </Card>
    <!-- 专利 -->
    <Temp ref="Temp" :type="kType" />
  </div>
</template>

<style lang="less" scoped>
.xuTp {
  display: inline-block;
  padding: 5px 8px;
  margin: 0 10px 10px 0;
  border: 1px solid #ccc;
}
.xuTp.active {
  border-color: #5887ef;
  color: #5887ef;
}
</style>

<script>
import Temp from "@$@/_service/temp";
export default {
  name: "pPageInfo",
  components: {Temp},
  props:['kType'],
  data() {
    let {
      $route: {
        name,
        query: { type }
      }
    } = this;
    

    let data = {
      name,
      type,
      typeI:$app.goodsBigClass(type),
      ziObj:{},//这个东西难写备注，请用搜索框看
      gTypeList:[],
      list: [],
      active: null
    };
    return data;
  },
  created() {
    this.getData();
  },
  computed:{
    xTitle(){
      let out='';
      let {gTypeList,type}=this;
      let xu=($app.goodsBigClass(this.type))-1;

      gTypeList[xu].forEach((val,i)=>{
        let str=$app.delSpace(JSON.stringify(val));
        let duiXu='\"goods_type\"\:'+type;
        // 包含就返回标题
        (str.indexOf(duiXu)>0) && (out=val.group,this.ziObj=val);

      });
      return out;
    },
    sTitle(){
      let out='';
      let {type,xTitle,ziObj}=this;

      if($app.judgeData(xTitle)&&$app.judgeData(ziObj)){
        (ziObj.items).forEach((val,i)=>{
          // 包含就返回标题
          (val.goods_type == type) && (out=val.title);
        });
      }
      return out;

      
    },
    smTitle(){
      let out='';
      let {
        list,
        active,
        typeI
      }=this;
      if($app.judgeData(list) && active!=null && typeI!=2){
        out=(' - '+list[active].desc);
      }
      return out;
    },
    xImg(){

      let {
        list,
        typeI,
        type,
        active
      }=this;

      let out='';

      if(type==200){//普通注册
        out=$app.getSession('bigSetting').tm_register.cover;
      }else if(type==209){//担保注册
        out=$app.getSession('bigSetting').tm_guarantee_register.cover;
      }else{
        out=$app.judgeData(list)?list[active].pc_cover:'';
      }

      return out;
    },
    iImg(){
      let {
        list,
        typeI,
        type,
        active
      }=this;

      let out='';

      if(type==200){//普通注册
        out=$app.getSession('bigSetting').tm_register.info_img;
      }else if(type==209){//担保注册
        out=$app.getSession('bigSetting').tm_guarantee_register.info_img;
      }else{
        out=$app.judgeData(list)?list[active].pc_info_img:'';
      }
      

      return out;
    },
    allK(){
      let out='';

      let {
        tm_register,//普通注册
        tm_guarantee_register,//担保注册
      }=$app.getSession('bigSetting');

      if(this.type==200){//普通注册
        out=parseFloat(tm_register.base_official_fee)+parseFloat(tm_register.base_service_fee);
      }else{//担保注册
        out=parseFloat(tm_guarantee_register.base_official_fee)+parseFloat(tm_guarantee_register.base_service_fee);
      }

      return out;
    },
    item_fee(){
      let out='';

      let {
        tm_register,//普通注册
        tm_guarantee_register,//担保注册
      }=$app.getSession('bigSetting');

      if(this.type==200){//普通注册
        out=parseFloat(tm_register.item_fee);
      }else{//担保注册
        out=parseFloat(tm_guarantee_register.item_fee);
      }

      return out;
    },
  },
  mounted() {},
  methods: {
    wcT(){
      let out='';
      switch(parseInt(this.typeI)){
        case 1:
          out='专利';
          break;
        case 2:
          out='商标';
          break;
      }
      return out;
    },
    goDo(){
      let {
        type,
        typeI,
        active,
        xTitle,
        sTitle,
        list
      }=this;
      
      let name='';
      let judge = false;

      $app.payInline.forEach((val, i) => {
        if(type == val.type){
          judge = true;
          name = val.name;
        }
      });

      // 专利 商标 版权 有下单流程
      if (judge) {
        $app.closeHadPage(name,()=>{
          $app.closeTag(this.$route);
          //页面跳转
          this.$router.push({
            name:name,
            query: {
              type,
              goodsId:($app.judgeData(list[active])?(list[active].id):undefined)
            }
          });
        });
        
      }else{
        // 3版权
        if(typeI==3){
          
          this.$refs["Temp"].zTunChange(list[active],active);//赋值
          this.$refs["Temp"].liKe();//支付
        } else if(typeI==1){//专利

          // 调起弹框函数
          this.$refs["Temp"].infoPageBox((xTitle+' '+sTitle+'-'+list[active].name),type,list,active);
        } else {//商标
          // 调起弹框函数
          this.$refs["Temp"].infoPageBox((xTitle+' '+sTitle+'-'+list[active].name),type,list,active);
        }
        
      }

      
    },
    getData() {
      let { name, type,typeI } = this;

      $ajax.gTypeList(type, resData => {
        this.gTypeList = resData;
      });

      
      $ajax.gList(type, resData => {
        
        this.list = resData;

        if ($app.judgeData(resData)) {
          this.active = 0;
        } else {
          this.active = null;
        }
      });
      
    }
  }
};
</script>


